<template>
	<view class="page">
		<!-- 导航区域 -->
		<u-navbar title="分销中心" :autoBack="true" leftText="返回" bgColor="rgba(255,255,255,0)"></u-navbar>

		<div class="main">
			<img id="fenxiao_bg" src="../../static/images/fenxiao_bg.png"> </img>

			<div class="fenxiao-info">
				<div style="padding-top: 28rpx;padding-bottom: 28rpx;display: flex;align-items: center; ">
					<img id="user-avatar" src="https://cdn.uviewui.com/uview/album/1.jpg" alt="" />
					<div style="margin-left: 40rpx;">
						<p id="user-name">伏厚康</p>
						<p id="user-level">代理商</p>
					</div>


				</div>
				<div id="money-bg">
					<div class="white-card-bg">
						<div>
							<div style="display: flex;align-items: center;">
								<span class="title-text">累计佣金(元)</span>
								<image src="../../static/icon/icon_view_detail.png" mode=""
									style="width: 35rpx;height: 35rpx;margin-left: 18rpx;"></image>
							</div>
							<p class="content-text">0</p>
						</div>

					</div>

					<div class="white-card-bg" style="margin-top: 56rpx;">
						<div>
							<div style="display: flex;align-items: center;">
								<span class="title-text">待入账(元)</span>
								<image src="../../static/icon/icon_view_detail.png" mode=""
									style="width: 35rpx;height: 35rpx;margin-left: 8rpx;"></image>
							</div>
							<p class="content-text">0</p>
						</div>
						<div>
							<p class="title-text">已提现(元)</p>
							<p class="content-text">0</p>
						</div>
						<div>
							<p class="title-text">消费金额</p>
							<p class="content-text">0</p>
						</div>
					</div>
					<u-button type="primary" text="立即提现" id="withdraw"></u-button>
				</div>

				<div class="btn-card-bg">
					<div style="display: flex;justify-content: space-between;align-items: center;">
						<div style="display: flex;align-items: center;">
							<img src="../../static/icon/ic_yongjin_jiesuan.png" alt=""
								style="width: 40rpx;height: 40rpx;margin-left: 30rpx;" />
							<span class="btn-style">佣金结算</span>
						</div>

						<img src="../../static/icon/ic_right_arrow.png" alt="" style="width: 28rpx;height: 28rpx;
							margin-right: 30rpx;" />
					</div>
					<div class="dividing-line"></div>

					<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 40rpx;">
						<div style="display: flex;align-items: center;">
							<img src="../../static/icon/ic_fenxiao_detail.png" alt=""
								style="width: 40rpx;height: 40rpx;margin-left: 30rpx;" />
							<span class="btn-style">分销详情</span>
						</div>

						<img src="../../static/icon/ic_right_arrow.png" alt="" style="width: 28rpx;height: 28rpx;
							margin-right: 30rpx;" />
					</div>
				</div>

			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		}
	}
</script>

<style>
	.main {
		width: 750rpx;
		height: 1370rpx;
		background-color: #f5f5f5;
		position: fixed;


	}

	#fenxiao_bg {
		width: 750rpx;
		height: 580rpx;
	}

	.fenxiao-info {
		width: 100%;
		padding-top: 40rpx;
		position: absolute;
		top: 50rpx;
	}

	#user-avatar {
		margin-left: 50rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		border: 4.3rpx solid white;
	}

	#user-name {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 36rpx;
		color: #000000;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: uppercase;
	}

	#user-level {
		margin-top: 18rpx;
		color: black;
		opacity: 0.5;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: uppercase;
	}

	#money-bg {
		width: 91.5%;
		margin-left: 30rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		background-color: black;

		background: #222222;
		border-radius: 20rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.24);
	}

	.white-card-bg {
		display: flex;
		margin-left: 40rpx;
		margin-right: 40rpx;
		align-items: center;
		justify-content: space-between;
	}

	.title-text {

		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 28rpx;
		color: #8A8A8A;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.content-text {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 600;
		font-size: 48rpx;
		color: #CFAE7D;
		margin-top: 20rpx;
		line-height: 48rpx;
		text-align: left;
		font-style: normal;
	}

	#withdraw {
		width: 89.5%;
		height: 90rpx;
		background-color: #CFAE7D;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		color: white;
		font-weight: 500;
		font-size: 32rpx;
		line-height: 46rpx;
		border-radius: 10rpx;
		margin-top: 50rpx;
		margin-left: 40rpx;
		border: 0px;
	}


	.btn-card-bg {
		background-color: white;
		padding-top: 40rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 40rpx;
		border-radius: 20rpx;
	}

	.btn-style {

		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 28rpx;
		color: #282828;
		line-height: 28rpx;
		text-align: left;
		margin-left: 20rpx;
		font-style: normal;
	}

	.dividing-line {
		height: 1rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 42rpx;
		background-color: #f0f0f0;
	}
</style>